<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>锤子科技商城注册</title>

<style>
body{ background-color:#CFF;}
#tbody{ 
    width:1100px; 
	height: auto; 
	margin:0 auto; 
	padding-top: 10px;
}
#register{
	background-color: #FFF;
	width: 600px;
	margin: 100px auto;
	padding-top: 20px;
	padding-bottom: 30px;
	padding-left: 50px;
	}
#registertitle{
	margin: 0;
	padding: 0;
	}
#registertitle img{
	width: 50px;
	height: 50px;
	vertical-align: middle;
	}
#registertitle span{
    display: block;
	}
#rediv2{
	width: 500px;
	margin: 0 auto;	
	overflow: hidden
	}
#fore dt{
	float: left;
	margin:10px;
	width: 110px;
	vertical-align: middle;
	display: inline-block;
	height: 25px;
	 text-align:justify;
     text-align-last:justify;
}
#fore dt:after{
     display:inline-block;
     overflow:hidden;
     width:100%;
     height:0;
     content:'';
     vertical-align: middle;
}
#fore dd{
	float: left;
	margin:10px;
	width: 340px;
	height: 25px;
	}
#fore p{
	margin: 0;
	padding: 0;
	}
#fore input{
     width: 180px;
	}


.error{
	color:red;
}






</style>



<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../js/validate-1.14.0.min.js"></script>

<script>

$().ready(function() {

$(function(){
  $('#fore').validate({
		rules:{
			username:{
				required:true,
		   /*   email: ture,
				  不验证？？？ 用户名查重
				remote:{
				    url: "checkuser.php",
				    type: "post",               
                    dataType: "json",              
                    data: {                    
                        username: function() {
                        return $("#username").val();
                          }
					}  
				}  */
			},
			pw01:{
				required:true,
				rangelength:[6,12]
			},
			pw02:{
				required:true,
				equalTo:'#pw01'
			},
		
			img:{
				extension:"gif|jpeg|jpg|png" /* 图片后缀名不验证 */
				},
			
			s01:"required",
			ss01:{
				required:true,
				maxlength:15
			},
			s02:"required",
			ss02:{
				required:true,
				maxlength:15
			}	
		
		},
		messages:{
			username:{
				required:"请输入一个用户名",
				email: "请输入正确的邮箱",
				remote: "用户名已存在"
			},
			pw01:{
				required:'请设置一个密码',
				rangelength:'密码位数为6到12位'
			},
			pw02:{
				required:'请再次确认密码',
				equalTo:'两次输入密码不相符'
			},
			
			img:{
				extension:"图片格式不正确"
				},
						
			s01:{
				required:"请选择您的密保问题"
				},
			ss01:{
				required:"请输入密保问题答案",
				maxlength: "不超过15个字符"
				},
			s02:{
				required: "请选择您的密保问题"
				},
			ss02:{
				required:"请输入密保问题答案",
				maxlength: "不超过15个字符"
				}
	
		}
	});	
  });
});











</script>



</head>

<body>

<div id="tbody">

    <div id="register">
         <div style=" margin: 0 auto; width: 200px;"><p id="registertitle"><span><img src="../img/head-logo.jpg" />　<strong>新用户注册</strong></span></p></div>
        <div id="rediv2">
          <form method="post" action="doregister.php" id="fore" enctype="multipart/form-data"> 
            <dl>
                <dt>用户名</dt><dd><p><input id="username" name="username" type="email" placeholder="请输入一个邮箱"><span class="error">*</span></p></dd>
                <dt>密码</dt><dd><p><input id="pw01" name="pw01" type="password" placeholder="请输入密码"><span class="error">*</span></p></dd>
                <dt>重复密码</dt><dd><p><input id="pw02" name="pw02" type="password" placeholder="请再次输入密码"><span class="error">*</span></p></dd>
                <dt>头像</dt><dd><p><input id="picture" name="picture" type="file" placeholder="图片小于20M"><span class="error"></span></p></dd>
                
                <dt>密保问题一</dt><dd><select id="s01" name="s01">
                                 <option value="">请选择密保问题</option>
                                 <option value="我最喜欢的一本书">我最喜欢的一本书</option>
                                 <option value="我最喜欢的水果">我最喜欢的水果</option>
                                 <option value="我最喜欢的一首歌">我最喜欢的一首歌</option>
                              </select>
                              <span class="error">*</span>
                              </dd>
                <dt>我的答案</dt><dd><p><input id="ss01" name="ss01" type="text" placeholder=""><span class="error">*</span></p></dd>
                
                <dt>密保问题二</dt><dd><select id="s02" name="s02">
                                 <option value="">请选择密保问题</option>
                                 <option value="我的高中是哪所学校">我的高中是哪所学校</option>
                                 <option value="我高中时暗恋谁">我高中时同桌是谁</option>
                                 <option value="高中语文老师性别">高中语文老师性别</option>
                              </select>
                              <span class="error">*</span>
                              </dd>
                <dt>我的答案</dt><dd><p><input id="ss02" name="ss02" type="text" placeholder=""><span class="error">*</span></p></dd>
            
            
            </dl>
             <div style=" margin: 0 auto; width: 200px;"><input type="submit" name="submit" value="注　　册" id="zhuce" style='font-size:20px'></div>
           </form>
        </div>
    
    </div>









</div>
<?php
include "../mysql/mysqlclose.php";
?>

</body>
</html>